<template>
	<div>
		<detail-header :sightName='sightName' :bannerImg='bannerImg' :gallaryImgs='gallaryImgs'></detail-header> 
		<detail-banner></detail-banner>
		<div class="item">
		<detail-list v-bind:list='categoryList'></detail-list> 
	    </div>
	  </div>
</template>
<script>
import detailHeader from './components/Header'
import detailBanner from './components/Banner'
import detailList from './components/List'
import axios from 'axios'
 export default{
 	name:'Detail',
 	components:{
 		detailHeader,
 		detailBanner,
 		detailList
 	},
 	methods:{
 		getInfo:function(){
 			axios.get('/api/detail.json?',{params:this.$route.params.id}).then(this.getInfoSucc);
 		},
 		getInfoSucc:function(res){
 			var res=res.data;
 			if(res.ret&&res.data){
  			this.sightName=res.data.sightName;
  			this.bannerImg=res.data.bannerImg;
  			this.gallaryImgs=res.data.gallaryImgs;
  			this.categoryList=res.data.categoryList;
 			}
 		}
 	},
 	mounted:function(){
 		this.getInfo();
 	},
    data:function(){ 
    	return {
    		sightName:'',
 			bannerImg:'',
 			gallaryImgs:[],
 			categoryList:[]
    	}	
    }
 }
</script>
<style lang='stylus' scoped>
.item
	position:absolute
	top:5 rem
	left:0
	right:0
</style>